import { Modal, Input, message } from "antd";
import { useState } from "react";
import { addFolder } from "@/service/file/index";
import { useSelector } from "react-redux";

const AddFolderModal = (props) => {
  const [folderName, setFolderName] = useState("");
  const searchParams = useSelector(
    (state) => state.searchReducer?.searchParams
  );
  const handleInputChange = (e) => {
    setFolderName(e.target.value);
  };
  const handleOk = async () => {
    if (!folderName) return message.error("文件夹名不能为空");
    const fetch = async () => {
      const params = {
        foldName: folderName,
      };
      if (searchParams.path) {
        params["path"] = searchParams.path;
      }
      const res = await addFolder({ params });
      return res;
    };
    props.onOk(fetch);
  };
  const handleCancel = () => {
    props.onCancel();
  };
  return (
    <Modal
      title={props.title}
      open={props.isOpenAddFolderModal}
      onOk={handleOk}
      onCancel={handleCancel}
      okText="新建"
      cancelText="取消"
    >
      <div style={{ marginBottom: "10px" }}>文件夹名：</div>
      <Input
        placeholder="请输入文件夹名"
        value={folderName}
        onChange={handleInputChange}
      />
    </Modal>
  );
};
export default AddFolderModal;
